<template>
  <view>
    <view class="bg-game">
      <view class="bg-game-red">

        <view class="member">

          <image class="avatar" mode="aspectFit" src="/static/avatar.png" @error="imageError"></image>
          <span style="color: white;margin-left: 10px">Galaxy</span>

        </view>

      </view>
      <view class="bg-vs">
        <view style="display:flex;flex-direction:row;align-items:flex-end;height: 120rpx;">
          <span style="font-size: 24px;color: yellow">VS</span>
        </view>
      </view>
      <view class="bg-game-blue">
        <view class="member">
          <span style="color: white;">Galaxy</span>
          <image class="avatar" style="margin-left: 10px" mode="aspectFit" src="/static/avatar.png"
                 @error="imageError"></image>
        </view>
      </view>

    </view>

    <view class="game-score">
      <view style="width: 40%;text-align: right">
        <span style="font-size: 30px;font-weight: bold">{{ this.game.redScore }}</span>
      </view>
      <view style="width: 20%;text-align: center">
        <span style="font-size: 30px">:</span>
      </view>
      <view style="width: 40%">
        <span style="font-size: 30px;font-weight: bold">{{ this.game.blueScore }}</span>
      </view>
    </view>

<!--    <view style="width: 100%;text-align: center">-->
<!--      <span style="font-size: 14px;color: #d8d8d8">正在进行:第1局</span>-->
<!--    </view>-->

    <view style="width: 100%;display: flex;flex-direction: row;justify-content: space-around;margin-top: 10px">
      <button style="width: 70px;font-size: 10px;background: #0b73c6;color: white" @click="win(1)">普胜+1</button>
      <button style="width: 70px;font-size: 10px;background: #cd0909;color: white" @click="win(2)">炸清+1</button>
      <button style="width: 70px;font-size: 10px;background: #bd6913;color: white" @click="win(3)">接清+1</button>
      <button style="width: 70px;font-size: 10px;background: #9b9b9c;color: white" @click="win(-1)">-1</button>
    </view>



    <!-- 普通弹窗 -->
    <uni-popup ref="popup" background-color="#fff" @change="change">
      <view class="popup-content">

        <span style="color: #d8d8d8">点击选择</span>

        <view style="display: flex;flex-direction: row;width: 100%">

          <view class="user" @click="selectUser('1')">
            <image style="width: 30px;height: 30px;border-radius: 50%"
                   mode="aspectFit" src="/static/avatar.png" @error="imageError"></image>
            <span style="font-size: 12px">Galaxy</span>
          </view>

          <view style="width: 20rpx"></view>

          <view class="user" @click="selectUser('2')">
            <image style="width: 30px;height: 30px;border-radius: 50%"
                   mode="aspectFit" src="/static/avatar.png" @error="imageError"></image>
            <span style="font-size: 12px">Galaxy</span>
          </view>

        </view>

      </view>
    </uni-popup>

  </view>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      selectData: {
        userId: '',
        score: null,
        type: null
      },
      game: {
        redScore: 10,
        blueScore: 9
      },
      tableData: []
    }
  },
  onLoad() {

  },
  methods: {
    selectUser(id) {
      this.selectData.userId = id
      this.$refs.popup.close()
    },
    change() {

    },
    win(type) {
      this.$refs.popup.open('bottom')
      this.selectData.type = type;
      if (type === 1 || type === 2 || type === 3) {
        this.selectData.score = 1
      } else if (type === -1) {
        this.selectData.score = -1
      }
    }
  }
}
</script>

<style lang="scss">
.bg-game {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 250rpx;
  box-shadow:  0 0 0 1px rgba(0, 0, 0, 0.5);

  .bg-game-red {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 50%;
    background: #d80b0b;
    height: 250rpx;

  }

  .bg-game-blue {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 50%;
    background: #0909a1;
    height: 250rpx;
  }

  .member {
    //border: 1px black solid;
    width: 200rpx;
    display: flex;
    height: 120rpx;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
  }


  .avatar {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
  }

  .bg-vs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: absolute;
    height: 250rpx;
  }
}

.game-score {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 150rpx;
}


.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  height: 80px;
  background-color: #fff;

  .user {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120rpx;
    height: 120rpx;
  }
}

</style>
